<template>
  <mars-dialog :title="isAdd ? '新增分组' : '重命名分组'" width="260" top="10%" left="40%">
    <div class="f-pt">
      <a-space>
        <mars-input v-model:value="treeName" placeholder="请输入名称" @press-enter="onClickTreeNameOk"></mars-input>
        <mars-button @click="onClickTreeNameOk">确定</mars-button>
      </a-space>
    </div>
  </mars-dialog>
</template>

<script lang="ts" setup>
import { onMounted, toRaw, ref } from "vue"
import * as mapWork from "./map"
import { useWidget } from "@mars/common/store/widget"
import { $message } from "@mars/components/mars-ui/index"

const { currentWidget, disable } = useWidget()
const treeName = ref("")
const isAdd = ref(true)

// 确定是新增名还是重命名
onMounted(() => {
  isAdd.value = currentWidget.data.isAdd
  treeName.value = currentWidget.data.inputName
})

// 命名确定
const onClickTreeNameOk = () => {
  if (!treeName.value.trim()) {
    $message("分组的标题不能为空")
    return
  }

  const groupId = toRaw(currentWidget.data.groupId)

  mapWork.addNewPlotTree(groupId, treeName.value, isAdd.value)
  disable("addPlotTree")
}
</script>
<style lang="less" scoped></style>
